<template>
  <div id="Welcome-box">
    <TopBar></TopBar>
    <!-- 轮播图 -->
    <div class="carousel-box">
      <el-carousel height="100vh" direction="vertical" :autoplay="true">
        <el-carousel-item v-for="item in 3" :key="item">
          <h3 class="medium"></h3>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- welcome主体行 -->
    <!-- !!! 页面拉伸时有bug -->
    <el-row :gutter="20">
      <!-- 左侧名称列 -->
      <el-col :xs="0" :sm="6" :md="6" :lg="6">
        <div class="grid-content bg-purple">
          <!-- 工作室名称区域 -->
          <div class="Theme">
            <h1>比特巅峰</h1>
            <p>工作室</p>
          </div>
        </div>
      </el-col>
      <!-- 右侧按钮列 -->
      <el-col :xs="24" :sm="18" :md="18" :lg="5">
        <div class="grid-content bg-purple-light">
          <!-- btn区域 -->
          <div class="big-btn">
            <div class="join">
              <a href="javascript:;">新生报名</a>
            </div>
            <div class="enter">
              <a href="javascript:;">进入官网</a>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
// 引入需要的组件
import TopBar from '@/components/common/TopBar/TopBar.vue'

export default {
  name: 'Welcome',
  data() {
    return {
      items: [{ img: '图一' }, { img: '图二' }, { img: '图三' }]
    }
  },
  components: {
    TopBar
  }
}
</script>

<style lang="scss" scoped>
$welcomeTextColor: #fff;
#Welcome-box {
  // position: fixed;
  width: 100%;
  height: 100%;
  .carousel-box {
    position: absolute;
    width: 100%;
    height: 100%;

    .el-carousel {
      .el-carousel__item {
        background-repeat: none;
        background-size: 100%;
      }

      .el-carousel__item:nth-child(1) {
        background: url('~assets/img/welcome/bgi_4.jpg');
      }
      .el-carousel__item:nth-child(2) {
        background: url('~assets/img/welcome/bgi_2.png');
      }

      .el-carousel__item:nth-child(3) {
        background: url('~assets/img/welcome/bgi_3.jpg');
      }
    }
  }
  a {
    text-decoration: none;
    color: $welcomeTextColor;
  }

  .el-row {
    position: relative;
    top: 230px;
    left: 200px;
    width: 1200px;
    .Theme {
      position: relative;
      z-index: 10;
      width: 400px;
      color: $welcomeTextColor;
      h1 {
        font-size: 60px;
        font-weight: 400;
      }
      p {
        padding-left: 230px;
        font-size: 30px;
        font-weight: 500;
      }

      h1,
      p {
        letter-spacing: 20px;
      }
    }
    .big-btn {
      position: relative;
      z-index: 10;
      left: 400px;
      top: 100px;
      width: 270px;
      color: $welcomeTextColor;
      .join,
      .enter {
        padding: 10px 0;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 20px;
        border: 2px solid $welcomeTextColor;
        a {
          display: inline-block;
          /*跟随父元素的高度*/
          height: inherit;
          border-bottom: 2px solid $welcomeTextColor;
          padding: 0 10px;
          letter-spacing: 20px;
          text-indent: 20px;
        }
      }
      .join {
        margin-bottom: 50px;
      }
    }
  }
}
</style>